<template>
    <div class="food_list">
        <van-tree-select
            :main-active-index="active"
            height="55vw"
            :items="items"
            @click-nav="navClick"
        >
        <template #content>
            <div v-for="(i,index) in subItem">
                <FoodItem :food="i"></FoodItem>
            </div>
        </template>
        </van-tree-select>
    </div>
</template>

<script >
import {reactive,toRefs,onMounted} from 'vue'
import FoodItem from './FoodItem.vue'
    export default{
        props:['foodData'],
        components:{FoodItem},
        setup(props){
            const data =reactive({
                items:[],
                subItem:[],
                active:0
            })
            const init = ()=>{
                data.items=[];
                props.foodData.items.map((i,index)=>{
                    data.items.push({'text':i.text})
                    if(data.active===index){
                    data.subItem=i.children
                    }
                })
            }
            onMounted(()=>{
                init()
            })
            const navClick = (index)=>{
                data.active=index
                data.subItem=props.foodData.items[index].children
            }
            return{
                ...toRefs(data),
                navClick
            }
        }
    }
</script>